<template>
  <div class="grid-container">
    <div class="grid-item" v-for="i in 9" :key="i"></div>
  </div>
</template>


<style lang="scss" scoped>
@use 'sass:math';
@use 'sass:list';

.grid-container {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

@for $i from 1 through 9 {
  .grid-item:nth-child(#{$i}) {
    background: hsl($i * 40%, 100%, 80%);
  }

  .grid-container:has(.grid-item:nth-child(#{$i}):hover) {
    $r : math.floor(($i - 1) / 3 + 1);
    $c : ($i - 1) % 3 + 1;
    $arr : 1fr 1fr 1fr;
    $rows : list.set-nth($arr, $r, 2fr);
    $cols : list.set-nth($arr, $c, 2fr);
    grid-template-columns: $cols;
    grid-template-rows: $rows;
    transition: all 1s;

  }
}
</style>
